<template>
    <div class="table_box">
        <el-table :data="tableData" class="com_table source_table" ref="straRef" height="700px" @sort-change='sortChange'>
            <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:700px">
                <img src="../../assets/img/null_icon.svg" alt="">
                <div class="font_13 color_03">暂无数据</div>
            </div>
            <el-table-column prop="material_name" label="素材名称" min-width="300"></el-table-column>
            <el-table-column prop="material_id" label="素材ID" min-width="180"></el-table-column>
            <el-table-column prop="stat_cost" label="消耗" min-width="150" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.stat_cost?scope.row.stat_cost:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="convert_cost" label="转化成本" min-width="150" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.convert_cost?scope.row.convert_cost:"--"}}
                </template>
            </el-table-column>
            <el-table-column prop="roi" label="ROI" min-width="150" sortable="custom">
                <template slot-scope="scope">
                    {{scope.row.roi?scope.row.roi:"--"}}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import "@/assets/css/video.css";
export default {
    props: ["tableData","queryInfo"],
    name: "",
    data() {
        return {};
    },
    created() {},

    methods: {
        // 表格排序
        sortChange(column) {
            this.queryInfo.ordertype = "";
            this.queryInfo.orderfield = "";
            if (!column.order) {
                this.queryInfo.page = 1
                this.$emit("getDataList")
                return;
            } else {
                var order = column.order.slice(0, -6);
            }
            this.queryInfo.ordertype = order;
            this.queryInfo.orderfield = column.prop;
            this.queryInfo.page = 1
            this.$emit("getDataList")
        },
    },
    components: {},
};
</script>


<style scoped>
.table_box {
    padding: 0 20px;
}
</style>
